<template>
  <div v-if="taskList.length > 0" class="full~ text-xs">
    <table class="full~">
      <tr class="w-full">
        <th class="w-2/5 demand-create-table-th~">任务名称</th>
        <th class="w-1/10 demand-create-table-th~">任务优先级</th>
        <th class="w-1/10 demand-create-table-th~">任务处理人</th>
        <th class="w-1/10 demand-create-table-th~">任务状态</th>
        <th class="w-1/10 demand-create-table-th~">预计开始时间</th>
        <th class="w-1/10 demand-create-table-th~">预计结束时间</th>
        <th class="w-1/10 demand-create-table-th~">任务操作</th>
      </tr>
      <tr v-for="(task, index) in formatTaskList" :key="index" :class="[index % 2 === 0 ? 'bg-gray-200':'']">
        <td class="demand-create-table-td~">{{ task.taskName }}</td>
        <td class="demand-create-table-td~">
          <grade-label :grade="task.taskPriority"/>
        </td>
        <td class="demand-create-table-td~">{{ task.taskOwner }}</td>
        <td class="demand-create-table-td~">
          <status-label :status="task.taskStatus"/>
        </td>
        <td class="demand-create-table-td~">{{ task.taskStart }}</td>
        <td class="demand-create-table-td~">{{ task.taskEnd }}</td>
        <td class="demand-create-table-td~ center~">
          <div class="p-5px box-border text-blue-600 cursor-pointer hover:underline" @click="onEdit(index)">编辑</div>
          <div class="p-5px box-border text-red-600 cursor-pointer hover:underline" @click="onDelete(index)">删除</div>
        </td>
      </tr>
    </table>
  </div>
  <div v-else class="h-full py-20px box-border">
    <no-content size="160"/>
  </div>
  <dialog-view title="编辑任务" v-model:active="dialogActive" :height="220" @submit="onSubmit">
    <div class="full~ flex flex-col p-10px box-border flex-wrap">
      <div class="flex">
        <div class="flex-none w-1/5">
          <default-input v-model:value="taskName" placeholder="请输入任务名称"/>
        </div>
        <div class="flex-none w-1/5 w-180px ml-10px h-40px">
          <select-input prefix="任务优先级" :options="TASK_PRIORITY" v-model:value="taskPriority"/>
        </div>
        <div class="flex-none w-1/5 ml-10px">
          <default-input v-model:value="taskOwner" placeholder="请输入任务所属人"/>
        </div>
        <div class="flex-none w-1/5 ml-10px h-40px">
          <select-input prefix="任务状态" :options="TASK_STATUS" v-model:value="taskStatus"/>
        </div>
      </div>
      <div class="mt-10px w-500px">
        <date-picker prefix="预计开始时间 - 预计结束时间" v-model="taskTime"/>
      </div>
    </div>
  </dialog-view>
  <alert :active="alterActive" :message="alterMessage" type="warning"/>
</template>

<script setup lang="ts">
import {ref, toRefs} from "vue";
import {TaskItem} from "../type"
import {formatDate} from "@/util";
import {useAlter} from "@/hooks";
import {TASK_PRIORITY, TASK_STATUS, useTask} from "../hooks"
import GradeLabel from "@/components/baseComponents/GradeLabel.vue";
import StatusLabel from "@/components/baseComponents/StatusLabel.vue";
import NoContent from "@/components/viewComponents/NoContent.vue";
import DialogView from "@/components/viewComponents/DialogView.vue";
import SelectInput from "@/components/customInput/SelectInput.vue";
import DefaultInput from "@/components/customInput/DefaultInput.vue";
import DatePicker from "@/components/baseComponents/DatePicker.vue";
import Alert from "@/components/baseComponents/Alert.vue";

interface Props {
  taskList: TaskItem[]
}

const emits = defineEmits(["update:taskList"])
const rawProps = defineProps<Props>()
const {taskList} = toRefs(rawProps)
const dialogActive = ref(false)
const {taskName, taskPriority, taskStatus, taskOwner, taskTime, updateTask, updateTaskItem, isQualified} = useTask()
const editIndex = ref(0)
const {alterActive, alterMessage, setAlter} = useAlter("")

const formatTaskList = computed(() => {
  return taskList.value.map(task => {
    return {
      ...task,
      taskOwner: task.taskOwner || "---",
      taskStart: formatDate(new Date(task.taskStart)),
      taskEnd: formatDate(new Date(task.taskEnd))
    }
  })
})

function onDelete(index: number) {
  const copyList = updateTask(taskList.value, index, 1)
  emits('update:taskList', copyList)
}

function onEdit(index: number) {
  dialogActive.value = true
  editIndex.value = index
  updateTaskItem(taskList.value, index)
}

function onSubmit() {
  if (isQualified()) {
    setAlter("格式错误")
    return
  }

  const copyList = updateTask(taskList.value, editIndex.value)
  emits('update:taskList', copyList)
  dialogActive.value = false
}

</script>

<style scoped>

</style>